<!--
 * @Description:
 * @Author: 大浪
 * @Date: 2021-03-12 11:40:49
 * @LastEditTime: 2021-03-24 17:35:21
 * @LastEditors: zhangqj
-->
<template>
  <div class="for_img flex flex-pack-justify">
    <div
      class="box flex flex-v flex-pack-justify flex-align-center"
      @click="goPage('hjAnchorList')"
    >
      <img
        class="big_img1"
        src="https://kunheng-web-static.oss-cn-hangzhou.aliyuncs.com/xccimg/video.png"
        alt=""
      >
      <span class="text">一键报名主播</span>
    </div>
    <div
      class="box flex flex-v flex-pack-justify flex-align-center"
      @click="goPage('hjHomeData')"
    >
      <img
        class="big_img2"
        src="https://kunheng-web-static.oss-cn-hangzhou.aliyuncs.com/xccimg/dircetion.png"
        alt=""
      >
      <span class="text">直播数据分析</span>
    </div>
    <div
      class="box flex flex-v flex-pack-justify flex-align-center"
      @click="goPage('hjAnchorDataList')"
    >
      <img
        class="big_img3"
        src="https://kunheng-web-static.oss-cn-hangzhou.aliyuncs.com/xccimg/text.png"
        alt=""
      >
      <span class="text">主播直播分析</span>
    </div>
    <div
      class="box flex flex-v flex-pack-justify flex-align-center"
      @click="goPage('hjGoodsList')"
    >
      <img
        class="big_img4"
        src="https://kunheng-web-static.oss-cn-hangzhou.aliyuncs.com/xccimg/car.png"
        alt=""
      >
      <span class="text">主播在线选品</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FourImage',
  created() {},
  methods: {
    goPage(name) {
      const url = this.$router.resolve({
        name
      })
      window.open(url.href, '_blank')
    }
  }
}
</script>

<style lang="scss" scoped>
.for_img {
  width: 1230px;
  height: 132px;
  padding: 0 45px;
  position: absolute;
  top: 505px;
  .box {
    width: 204px;
    height: 132px;
    padding: 20px 34px;
    background: #f7fafd;
    border-radius: 16px;
    cursor: pointer;
  }
  .big_img1 {
    width: 70px;
    height: 58px;
    object-fit: cover;
  }
  .big_img2 {
    width: 70px;
    height: 58px;
    object-fit: cover;
  }
  .big_img3 {
    width: 73px;
    height: 63px;
    object-fit: cover;
  }
  .big_img4 {
    width: 66px;
    height: 57px;
    object-fit: cover;
  }
  .text {
    font-size: 22px;
    line-height: 1;
    font-weight: 500;
    color: $theme-text;
    font-family: PingFangSC-Medium, PingFangSC;
  }
}
</style>
